<template>
  <div class="draw">
    <div class="luckDraw">
      <!-- <h3 class="title strength">{{ $t('anniversary.nonStrp') }}</h3> -->
      <div class="title1">
        <img src="@/assets/img/activity/christmas/turnTitle.png" alt=""
        v-if="$store.state.app.language === 'zh-CN'
        || $store.state.app.language === 'zh-TW'">
        <img src="@/assets/img/activity/christmas/turnTitleen.png" alt="" v-else  style="width: 600px;">
      </div>
      <div class="prizeList"
        v-show="isStart !== 0"
        ref="noticeHover"
        style="position: relative; height: 35px; overflow: hidden; width: 600px;"
        :style="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW' ? 'padding: 0 0 0 140px': ''">
        <div class="noticeScroll" ref="noticeScroll">
          <div :key="index" v-for="(item, index) in lastDrawLogList" class="noticeItem flex">
            <i class="iconfont icon-xiaoxitishi"></i>
            <!-- 恭喜{{item.account }}抽得{{ item.reward }}的奖励！！！  -->
            {{ $t('anniversary.congra', {account: item.account, reward: item.reward}) }}
          </div>
        </div>
      </div>
      <!-- 抽奖 -->
      <div class="luckDrawCont turntable-box">
        <div class="btn" @click="handleTurntable">
          <template v-if="isStart === 1">
            <span>{{ $t('anniversary.joinNow1') }}</span>
            <span>{{ $t('anniversary.joinNow2') }}</span>
            <span style="font-size: 14px;"
            v-if="$store.state.app.scatter
            && $store.state.app.scatter.identity
            && remainDrawCount !== null
            && $store.state.app.scatter.chain === 'eos'">
              <template v-if="remainDrawCount > 1">
                （{{ $t('anniversary.numTimes', {number: remainDrawCount}) }}）
              </template>
              <template v-else>
                （{{ $t('anniversary.numTimes1', {number: remainDrawCount}) }}）
              </template>
            </span>
          </template>
          <template v-else-if="isStart === 2">
            <span>{{ $t('anniversary.closed') }}</span>
          </template>
          <template v-else>
            <span>{{ $t('anniversary.commingSoon1') }}</span>
            <span>{{ $t('anniversary.commingSoon2') }}</span>
          </template>
        </div>
        <div ref="turntable" v-if="turntableShow">
        </div>
      </div>
      <!-- <p v-if="$store.state.app.scatter
        && $store.state.app.scatter.identity
        && remainDrawCount !== null
        && $store.state.app.scatter.chain === 'eos'
        && isStart === 1"
        class="center"
        style="margin-top: 30px; color: #FFC78A;">
        {{ $t('anniversary.remaining', {time: remainDrawCount}) }}
      </p> -->
      <div class="luckDrawBtn flex">
        <!-- 我的抽奖记录 -->
        <span @click="handleLoginAuth('record')">{{ $t('anniversary.myRecord') }}</span>
        <!-- 我要领奖 -->
        <span @click="handleGetReward">{{ $t('anniversary.claimMyReward') }}</span>
      </div>
      <div class="luckDrawRules">
        <p>{{ $t('christmas2019.chris22') }}</p>
        <p class="fontBold">{{ $t('christmas2019.chris23') }}</p>
        <p class="pdl">{{ $t('christmas2019.chris24') }}</p>
        <p class="pdl">{{ $t('christmas2019.chris25') }}</p>
        <p class="fontBold">{{ $t('christmas2019.chris26') }}</p>
        <p class="pdl">{{ $t('christmas2019.chris27') }}</p>
        <p class="pdl">{{ $t('christmas2019.chris28') }}</p>
        <el-collapse-transition>
          <div v-show="isActive">
            <p class="pdl">{{ $t('christmas2019.chris29') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris30') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris31') }}</p>
            <p class="fontBold">{{ $t('christmas2019.chris32') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris33') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris34') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris35') }}</p>
            <p class="fontBold">{{ $t('christmas2019.chris36') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris37') }}</p>
            <p class="pdl">{{ $t('christmas2019.chris38') }}</p>
            <p class="fontBold">{{ $t('christmas2019.chris39') }}</p>
            <p class="fontBold">{{ $t('christmas2019.chris40') }}</p>
            <p class="mb40">{{ $t('christmas2019.chris41') }}</p>
            <p>{{ $t('christmas2019.chris42') }}</p>
            <p>{{ $t('christmas2019.chris43') }}</p>
            <p>{{ $t('christmas2019.chris44') }}</p>
            <p>{{ $t('christmas2019.chris45') }}</p>
            <p>{{ $t('christmas2019.chris46') }}</p>
            <p>{{ $t('christmas2019.chris47') }}</p>
            <p>{{ $t('christmas2019.chris48') }}</p>
          </div>
        </el-collapse-transition>
        <div @click="isActive = !isActive" class="flexc arrowIcon">
          <div v-if="!isActive" class="flex">
            <span>{{ $t('christmas2019.chris57') }}</span>
            <i class="iconfont el-icon-arrow-down"></i>
          </div>
          <div v-else class="flex">
            <span>{{ $t('christmas2019.chris59') }}</span>
            <i class="iconfont el-icon-arrow-up"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 获奖记录 -->
    <div class="awardRecord layer" v-if="layerHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.myPrize') }}</p>
        <template v-if="drawLogList.length > 0">
          <div class="tableList">
            <div class="tablehead flex">
              <div>{{ $t('anniversary.Prize') }}</div>
              <div>{{ $t('anniversary.timePrize') }}</div>
            </div>
            <div class="wrapTable">
              <div class="tableBody flex" :key="index" v-for="(item, index) in drawLogList">
                <div>{{ item.reward }}</div>
                <div>{{ item.createTs | dateFormatBIH }}</div>
              </div>
            </div>
          </div>
          <div class="wantBtn" @click="handleShowOrder">{{ $t('anniversary.exchangeThePrize') }}</div>
        </template>
        <template v-else>
          <div class="flexc" style="padding-top: 160px; font-size: 20px;">{{ $t('anniversary.noWinningRecord') }}</div>
        </template>
      </div>
    </div>
    <!-- 兑奖页面 -->
    <div class="submitOrderRecord layer" v-if="layerOrderHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.exchangeThePrize') }}</p>
        <div class="word">
          <p style="margin-bottom: 30px;">
            {{ $t('anniversary.asPossible') }}
          </p>
          <p>{{ $t('anniversary.asPossible1') }}</p>
        </div>
        <div class="orderBtn flexb">
          <span @click="handleCloseLayer">{{ $t('anniversary.cancelPrize') }}</span>
          <a href="https://newdex.zendesk.com/hc/zh-cn/requests/new" target="_blank"
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
            {{ $t('anniversary.submitRequest') }}
          </a>
          <a href="https://newdex.zendesk.com/hc/en-us/requests/new" target="_blank" v-else>
            {{ $t('anniversary.submitRequest') }}
          </a>
        </div>
      </div>
    </div>
    <!-- 抽奖结束弹窗 -->
    <div class="endDialog layer center" v-if="layerEndHide" :class="{'getReward': ownInfo && ownInfo.awardLevel !== 10}">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close"  @click="layerEndHide = false;"></div>
        <h2 v-if="ownInfo.awardLevel !== 12">{{ $t('anniversary.winPrize') }}</h2>
        <h2 v-else style="color: #fff;">{{ $t('anniversary.thankYouFor') }}</h2>
        <h3 v-if="ownInfo.awardLevel !== 12">{{ $t('anniversary.congratulations', {reward: ownInfo.reward}) }}</h3>
        <h3 v-else style="color: #fff;">{{ $t('anniversary.unfortunately') }}</h3>
        <img :src="imgUrl" alt="">
        <h4 v-if="ownInfo.awardLevel === 1">{{ $t('anniversary.endTime') }}</h4>
        <div class="endBtn" @click="layerEndHide = false;">{{ $t('anniversary.keepDrawing') }}</div>
        <div class="tipNoCpu" v-if="ownInfo.awardLevel !== 12 && ownInfo.awardLevel !== 1">
          {{ $t('christmas2019.tip1') }}
        </div>
      </div>
    </div>
    <!-- 中奖次数用完 -->
    <div class="submitOrderRecord layer noneDialog" v-if="layerNoneHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="layerNoneHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.drawTimes') }}</p>
          <div class="endBtn" @click="layerNoneHide = false;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖未开始 -->
    <div class="submitOrderRecord layer noneDialog" v-if="notstartedHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="notstartedHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('christmas2019.chris16') }}, {{$t('christmas2019.chris68')}}</p>
          <div class="endBtn" @click="notstartedHide = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖已结束 -->
    <div class="submitOrderRecord layer noneDialog center" v-if="startOver">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="startOver = false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.activeOver') }}</p>
          <div class="endBtn" @click="startOver = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import LotteryTurntable from 'lottery-turntable';
import { authorized } from '@/utils/validate';

export default {
  name: 'draw', // 抽奖
  data() {
    return {
      noticeScrollTimer: null,
      drawLogList: [], // 个人获奖记录
      remainDrawCount: null, // 抽奖次数
      lastDrawLogList: [], // 最近的中奖记录
      layerHide: false, // 个人获奖记录弹窗
      layerOrderHide: false, // 提交工单
      layerEndHide: false, // 结果页
      layerNoneHide: false, // 没抽奖次数
      notstartedHide: false, // 抽奖未开始
      startOver: false, // 抽奖已结束
      ownInfo: { // 抽奖结果
        awardLevel: 0,
        reward: '',
      },
      imgUrl: '',
      isClick: true, // 防止重复点击
      turntable: '',
      turntableShow: true, // 抽奖转盘显示
      isStart: 0, // 是否开始
      loading: true, // loading
      values: [
        {
          id: 2, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
          name: this.$t('anniversary.rewards2'), // 奖品名称
          img: {
            src: '/static/activity/christmas/sand.png?v=2.0.0', // 奖品图片路径
            width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
            height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
          },
          bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
          fill: '#333', // 奖品名称的文字颜色
        },
        {
          id: 5,
          name: this.$t('anniversary.rewards5'),
          img: {
            src: '/static/activity/christmas/eidos.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 3,
          name: this.$t('anniversary.rewards3'),
          img: {
            src: '/static/activity/christmas/emt.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 4,
          name: this.$t('anniversary.rewards4'),
          img: {
            src: '/static/activity/christmas/sbet.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 6,
          name: this.$t('anniversary.rewards6'),
          img: {
            src: '/static/activity/christmas/eidos.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 7,
          name: this.$t('anniversary.rewards7'),
          img: {
            src: '/static/activity/christmas/lynx.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 8,
          name: this.$t('anniversary.rewards8'),
          img: {
            src: '/static/activity/christmas/steemp.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 9,
          name: this.$t('anniversary.rewards9'),
          img: {
            src: '/static/activity/christmas/defi.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 1,
          name: this.$t('anniversary.rewards1'),
          img: {
            src: '/static/activity/christmas/ipad.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 12,
          name: this.$t('anniversary.thanks'),
          img: {
            src: '/static/activity/christmas/thanks.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 10,
          name: this.$t('anniversary.rewards10'),
          img: {
            src: '/static/activity/christmas/bap.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 11,
          name: this.$t('anniversary.rewards11'),
          img: {
            src: '/static/activity/christmas/dice.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
      ],
      isActive: false
    }
  },
  components: {},
  props: {},
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.remainDrawCount = null;
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.turntableShow = false;
      this.values = [
        {
          id: 2, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
          name: this.$t('anniversary.rewards2'), // 奖品名称
          img: {
            src: '/static/activity/christmas/sand.png?v=2.0.0', // 奖品图片路径
            width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
            height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
          },
          bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
          fill: '#333', // 奖品名称的文字颜色
        },
        {
          id: 5,
          name: this.$t('anniversary.rewards5'),
          img: {
            src: '/static/activity/christmas/eidos.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 3,
          name: this.$t('anniversary.rewards3'),
          img: {
            src: '/static/activity/christmas/emt.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 4,
          name: this.$t('anniversary.rewards4'),
          img: {
            src: '/static/activity/christmas/sbet.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 6,
          name: this.$t('anniversary.rewards6'),
          img: {
            src: '/static/activity/christmas/eidos.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 7,
          name: this.$t('anniversary.rewards7'),
          img: {
            src: '/static/activity/christmas/lynx.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 8,
          name: this.$t('anniversary.rewards8'),
          img: {
            src: '/static/activity/christmas/steemp.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 9,
          name: this.$t('anniversary.rewards9'),
          img: {
            src: '/static/activity/christmas/defi.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 1,
          name: this.$t('anniversary.rewards1'),
          img: {
            src: '/static/activity/christmas/ipad.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 12,
          name: this.$t('anniversary.thanks'),
          img: {
            src: '/static/activity/christmas/thanks.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 10,
          name: this.$t('anniversary.rewards10'),
          img: {
            src: '/static/activity/christmas/bap.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
        {
          id: 11,
          name: this.$t('anniversary.rewards11'),
          img: {
            src: '/static/activity/christmas/dice.png?v=2.0.0',
            width: 80,
            height: 80,
          },
          bg: '#fff',
          fill: '#333',
        },
      ];
      setTimeout(() => {
        this.turntableShow = true;
        this.$nextTick(() => {
          this.initTurntable();
        });
      }, 1000);
    },
  },
  computed: {},
  created() {},
  mounted() {
    const token = localStorage.getItem('Frontend-Token');
    const scatter = this.$store.state.app.scatter;
    if (token && scatter && scatter.identity) {
      this.handleDrawInfo();
    }
    // 获取最近中奖记录
    this.handleDrawList();
    this.handleNoticeScroll();
    this.initTurntable();
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
  },
  methods: {
    // 获取抽奖信息
    handleDrawInfo() {
      this.$http.post('/christmas/getAccountDrawInfo').then((res) => {
        // if (res.code === 1028) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code === 401) {
          authorized(this, (code, result) => {
            if (code === 'error') { // 授权错误
              console.log(result); // eslint-disable-line
              return;
            }
            this.handleDrawInfo();
          });
          return;
        }
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        this.drawLogList = res.drawLogList;
      });
    },
    // 初始化转盘
    initTurntable() {
      this.turntable = new LotteryTurntable({
        type: 'transition', // 转盘转动类型
        size: 615, // 转盘尺寸，默认为320
        textSpace: 30, // 奖品名称距离转盘边距，默认为15
        imgSpace: 90, // 奖品图片距离转盘边距，默认为50
        speed: 4, // transition动画持续多长时间，秒为单位
        ring: 10, // 转动多少圈后到达终点，越大转速越快
        values: this.values,
        container: this.$refs.turntable
      });
    },
    // 判断有无登录和授权
    handleLoginAuth(type) {
      if (!this.isClick) return;
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('anniversary.plstoEos'));
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          if (type === 'record') {
            this.handleDrawInfo();
            this.layerHide = true; // 个人获奖记录弹窗
          }
        });
        return;
      }
      if (type === 'record') {
        this.handleDrawInfo();
        this.layerHide = true; // 个人获奖记录弹窗
      }
    },
    // 抽奖
    handleTurntable() {
      if (this.isStart === 0) {
        this.notstartedHide = true;
        return;
      }
      if (this.isStart === 2) {
        this.startOver = true;
        return;
      }
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('anniversary.plstoEos'));
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleDrawInfo();
        });
        return;
      }
      if (this.remainDrawCount === 0) {
        this.layerNoneHide = true;
        return;
      }
      this.handleStartDraw(); // 开始抽奖
    },
    // 开始抽奖
    handleStartDraw() {
      // 防止重复点击
      if (this.isClick) {
        this.isClick = false;
        setTimeout(() => {
          this.isClick = true;
        }, 4000);
      } else {
        return;
      }
      this.$http.post('/christmas/startDraw').then((res) => {
        if (res.code === 1028) {
          this.$message.warning(this.$t('anniversary.plstoEos'));
          return;
        }
        // if (res.code === 1029) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        const awardLevel = res.awardLevel;
        this.turntable.goto(awardLevel, () => {
          this.layerEndHide = true;
          this.ownInfo = {
            awardLevel: res.awardLevel,
            reward: res.reward
          };
          this.imgUrl = this.values.find(v => v.id === res.awardLevel).img.src;
        });
        setTimeout(() => {
          this.handleDrawList();
        }, 2000);
      });
    },
    // 获取获奖列表
    handleDrawList() {
      this.$http.post('/christmas/getLastDrawList').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.lastDrawLogList = res.lastDrawLogList;
        this.isStart = res.isStart;
        setTimeout(() => {
          this.handleDrawList();
        }, 120000);
      });
    },
    // notice 滚动
    handleNoticeScroll() {
      let noticeScrollWay = -35;
      this.noticeScrollTimer = setInterval(() => {
        if (this.$refs.noticeScroll) {
          this.$refs.noticeScroll.style = `transform: translateY(${noticeScrollWay}px) scale(1);`;
        }
        noticeScrollWay -= 35;
        const num = this.lastDrawLogList.length;
        if (noticeScrollWay < -35 * num) {
          noticeScrollWay = -35;
        }
      }, 3000)
    },
    // 登录授权
    handleWalletPermission() {
      this.$emit('listenWalletPermission', true);
    },
    handleGetReward() {
      if (!this.isClick) return;
      this.layerOrderHide = true;
    },
    // 关闭抽奖记录弹窗
    handleCloseLayer() {
      this.layerHide = false;
      this.layerOrderHide = false;
    },
    // 我要兑奖
    handleShowOrder() {
      this.layerHide = false;
      this.layerOrderHide = true;
    },
  },
}
</script>
<style lang="scss" scoped>
$-btn-color: #663C04;
$-btn-back: #F1C89D;

.draw {
  .luckDraw {
    .prizeList {
      margin: 0 auto 40px;
      line-height: 35px;
      color: $-btn-back;
      // border: 1px solid #fff;
      border-radius: 20px;
      padding: 0 40px;
      // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
      .noticeScroll {
        transition: transform .4s ease-in-out;
        position: absolute;
        width: 550px;
        padding-left: 30px;

        .noticeItem {
          line-height: 35px;
          font-size: 16px;
        }

        i {
          margin: 0 10px 0 0;
          font-size: 24px;
        }
      }
    }

    .luckDrawCont {
      position: relative;
      margin: 20px auto 20px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: #fff;
    }

    .turntable-box{
      width: 680px;
      height: 680px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('../../../assets/img/activity/midAutumn/drawBack.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      font-size: 14px;
      // font-weight: bold;
      margin: 0 auto;

      .btn {
        width: 270px;
        height: 270px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%,-50%);
        background: url('../../../assets/img/activity/midAutumn/drawBtn.jpg') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;
        color: $-btn-color;

        p {
          margin: 5px 0 20px 0;
          font-weight: normal;
          font-size: 14px;
          color: #721041;
        }
      }
    }

    .luckDrawBtn {
      justify-content: center;
      margin: 30px 0 100px 0;

      span {
        min-width: 200px;
        line-height: 40px;
        padding: 0 10px;
        text-align: center;
        color: $-btn-color;
        background: $-btn-back;
        border-radius: 5px;
        cursor: pointer;
      }

      span:nth-child(1) {
        margin-right: 40px;
        color: $-btn-back;
        background: transparent;
        border: 1px solid $-btn-back;
      }
    }

    .luckDrawRules {
      width: 1000px;
      margin: 0 auto 0;
      color: #F1C89D;

      p {
        line-height: 26px;
      }

      .mb40 {
        margin-bottom: 40px;
      }

      .pdl {
        padding-left: 22px;
      }
    }
  }
  .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;

    .layer-cont {
      position: absolute;
      top: 15vh;
      left: 50%;
      width: 450px;
      min-height: 500px;
      background: #232428;
      transform: translate(-50%);
      padding: 30px 30px 40px 30px;

      .awardRecordCapition {
        color: #FFC78A;
        font-size: 24px;
        margin-bottom: 20px;
      }

      .closeBtn {
        position: absolute;
        top: -0;
        right: -0px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
      }

      .wantBtn {
        text-align: center;
        width: 215px;
        line-height: 54px;
        color: $-btn-color;
        background: $-btn-back;
        margin: 50px auto 0;
        border-radius: 5px;
        cursor: pointer;
      }

      .tableList {
        border-radius: 5px;
        text-align: center;

        .tablehead {
          background: #404349;
          color: #FFC78A;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }

        .wrapTable {
          height: 275px;
          overflow-y: scroll;
          background: #34363a;
          &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: #34363a;
            border-radius: 15px;
          }
          /*定义滚动条的轨道，内阴影及圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0 #34363a;
            border-radius: 0;
            background-color: #34363a;
          }
          /*定义滑块，内阴影及圆角*/
          &::-webkit-scrollbar-thumb {
            /*width: 10px;*/
            /*height: 25px;*/
            border-radius: 1px;
            -webkit-box-shadow: inset 0 0 0 #34363a;
            background-color: rgba(193, 193, 193, 0.7);
          }
        }

        .tableBody {
          color:#fff;
          background: #34363a;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }
      }
    }
  }

  .submitOrderRecord {
    font-size: 20px;

    .endBtn {
      display: block;
      width: 187px;
      line-height: 55px;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      color: $-btn-color;
      background: $-btn-back;
      margin: 30px auto 0;
    }
    .codeCanvas {
      margin-top: 40px;
    }

    .layer-cont {
      min-height: 400px;

      .orderBtn {
        margin-top: 40px;

        span, a {
          border: 1px solid $-btn-back;
          display: inline-block;
          width: 187px;
          line-height: 55px;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
          color: $-btn-back;
        }

        a {
          background: $-btn-back;
          color: $-btn-color;
        }
      }
    }
  }

  .noneDialog {
    .layer-cont {
      min-height: 300px;

      .word {
        margin-top: 30px;
      }
    }
  }

  .endDialog {
    text-align: center;

    .layer-cont {
      min-height: 450px;
      // background: url('../../../assets/img/activity/anniversary/back1.png') no-repeat;
      // background-size: 100% 100%;

      img {
        display: block;
        width: 144px;
        height: 144px;
        margin: 0 auto;
      }

      h2 {
        font-size: 34px;
        color: #FFC78A;
      }

      h3 {
        margin: 16px 0 25px;
        font-size: 22px;
        color: #FFC78A;
      }

      h4 {
        color: #F5A623;
      }

      .endBtn {
        background-image: linear-gradient(0deg, #E5AE65 0%, #FFEA7A 100%);
        border-radius: 7.5px;
        font-size: 18px;
        color: #8B572A;
        line-height: 50px;
        width: 180px;
        text-align: center;
        margin: 70px auto 0;
        cursor: pointer;
      }

      .tipNoCpu {
        margin-top: 20px;
        margin-bottom: -20px;
        color: $-btn-back;
      }
    }
  }

  .endDialog.getReward {
    .layer-cont {
      // background: url('../../../assets/img/activity/anniversary/back2.png') no-repeat;
      // background-size: 100% 100%;
    }
  }
}
.title {
  text-align: center;
  font-size: 40px;
  margin: 120px 0 60px 0;
  color: #FFC78A;
}

.arrowIcon {
  color: #bfbfbf;
  div {
    cursor: pointer;
  }

  i {
    margin-left: 3px;
    font-size: 24px;
  }
}

.title1 {
  img {
    display: block;
    width: 371px;
    margin: 50px auto 30px;
  }
}
</style>

